import React, { Fragment, Component } from "react";
import { View, Text, StatusBar, StyleSheet, TouchableHighlight, ScrollView } from "react-native";
import Ionicons from "react-native-vector-icons/Ionicons";
import SettingItem from '../../components/SettingItem/index'
class More extends Component {
  constructor() {
    super();
    this.state = {};
  }
  render() {
    return (
      <Fragment>
        <View style={styles.container}>
          <StatusBar backgroundColor="orange" barStyle="light-content" />
          <View style={styles.topGuide}>
            <Text style={styles.textStyle}>更多</Text>
            <TouchableHighlight style={styles.settingStyleWrap}>
              <Ionicons name={"ios-settings"} size={24} color={"white"} style={styles.settingStyle}/>
            </TouchableHighlight>
          </View>
          <View style={{backgroundColor:'#dddddd',flex:1}}>
            <ScrollView>
              <View style={{}}>
                <SettingItem title="扫一扫" />
              </View>
              <View style={{borderBottomWidth:1,borderBottomColor:'#ccc',marginTop:10}}>
                <SettingItem title="省流量模式" isSwitch={true} />
              </View>
              <View style={{borderBottomWidth:1,borderBottomColor:'#ccc'}}>
                <SettingItem title="消息提醒" isSwitch={false} />
              </View>
              <View style={{borderBottomWidth:1,borderBottomColor:'#ccc'}}>
                <SettingItem title="邀请好用使用" isSwitch={false} />
              </View>
              <View style={{borderBottomWidth:1,borderBottomColor:'#ccc'}}>
                <SettingItem title="清空缓存" isSwitch={false}  rightTitle="1.98M"/>
              </View>
              <View style={{borderBottomWidth:1,borderBottomColor:'#ccc',marginTop:10}}>
                <SettingItem title="问卷调查" isSwitch={false} />
              </View>
              <View style={{borderBottomWidth:1,borderBottomColor:'#ccc'}}>
                <SettingItem title="支付帮助" isSwitch={false} />
              </View>
              <View style={{borderBottomWidth:1,borderBottomColor:'#ccc'}}>
                <SettingItem title="网络诊断" isSwitch={false} />
              </View>
              <View style={{borderBottomWidth:1,borderBottomColor:'#ccc'}}>
                <SettingItem title="关于麻团" isSwitch={false} />
              </View>
              <View style={{borderBottomWidth:1,borderBottomColor:'#ccc'}}>
                <SettingItem title="我要应聘" isSwitch={false} />
              </View>
              <View style={{borderBottomWidth:1,borderBottomColor:'#ccc',marginTop:10}}>
                <SettingItem title="精品应用" isSwitch={false} />
              </View>
            </ScrollView>
          </View>
        </View>
      </Fragment>
    );
  }
}
const styles = StyleSheet.create({
  container:{
    flex:1,
  },
  topGuide: {
    height: 65,
    backgroundColor: "orange",
    flexDirection: "row",
    //justifyContent:'center',
    alignItems: "center",
    justifyContent:'center'
  },
  textStyle:{
    fontSize:18,
    color:'white',
    marginTop:10
  },
  settingStyleWrap:{
    //alignSelf:'flex-end',
    //justifyContent:'flex-end'
    //flexDirection:'row',
    position:'absolute',
    right:10,
    bottom:15,
  },
  settingStyle:{
    //alignSelf:'flex-end',
  }
})
export default More;